<template>
  <div class="div1">
    <img src="~@/assets/img/img1.png" alt="" />
    <div class="div2">{{ bqdata1 }}</div>
    <div class="div3">
      <span style="font-size: 25px">{{ bqdata2 }}</span
      ><span>项</span><span class="mm">占比：</span
      ><span style="font-size: 25px">{{ bqdata3 }}%</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    bqdata1: {
      type: String,
      default: "",
    },
    bqdata2: {
      type: Number,
      default: 0,
    },
    bqdata3: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {};
  },
  watch: {
    
  },
  mounted() {},
  methods: {},
};
</script>

<style scoped>
img {
  width: 250px;
  height: 100px;
}
.div1 {
  position: relative;
  width: 250px;
  height: 100px;
}
.div2 {
  width: 250px;
  position: absolute;
  z-index: 2;
  left: 2.833333rem;
  top: 1rem;
  color: #fff;
}
.div3 {
  color: #fff;
  width: 250px;
  position: absolute;
  z-index: 2;
  left: 1.5rem;
  top: 2.8rem;
}
.mm {
  padding-left: 30px;
}
</style>
